<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按中文释义背单词</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
    </style>
</head>
<body>
    <h1>按中文释义背单词</h1>
    <p>{{ prompt }}</p>
    <form action="/learn_by_meaning" method="post">
        <input type="text" name="answer" style="width: 300px; height: 40px;">
        <button type="submit">提交</button>
    </form>
    {% if is_correct is defined %}
        {% if is_correct %}
            <p style="color: green;">回答正确！</p>
        {% else %}
            <p style="color: red;">回答错误！正确答案是：{{ correct_answer }}</p>
            <form action="/add_to_wrong_book" method="post">
                <input type="hidden" name="word_id" value="{{ session['current_word']['id'] }}">
                <button type="submit">添加到错题本</button>
            </form>
        {% endif %}
    {% endif %}
    <form action="/learn_by_meaning" method="get">
        <button type="submit">下一个单词</button>
    </form>
</body>
</html>